<template>
  <div class="home-page">
    <van-nav-bar title="首页" />
    <div class="content">
      <div class="more">
        <p class="bb">本月统计</p>
        <div class="list">
          <div class="li" v-for="(item,i) in list" :key="i" :style="randomRgb()">
            <div class="uname">{{item.nickName}}</div>
            <div class="unum">￥{{item.num}}</div>
          </div>
        </div>
      </div>

      <div class="more">
        <p class="bb">近七天消费情况</p>
        <div id="myChart" class="chart"></div>
      </div>
      <div class="more">
        <p class="bb">最近五条消费记录</p>
        <div class="box">
          <van-empty v-if="bills.length<=0" description="暂无数据" />
          <div class="item" v-for="(item,i) in bills" :key="i">
            <van-image round fit="cover" :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.email+'&spec=100'" />
            <h3 class="name">{{item.nickName}}</h3>
            <div class="time">{{item.creatTime}}</div>
            <div class="num">￥{{item.money}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getList, getTj, getBillFive } from '@/api/home'
export default {
  name: 'HomePage',
  data () {
    return {
      randomRgb () {
        const R = Math.floor(Math.random() * 130 + 110)
        const G = Math.floor(Math.random() * 130 + 110)
        const B = Math.floor(Math.random() * 130 + 110)
        return {
          background: 'rgb(' + R + ',' + G + ',' + B + ', .5)'
        }
      },
      list: [],
      bills: []
    }
  },
  created () {
    this.getlist()
    this.getBill()
  },
  mounted () {
    this.drawLine()
  },
  methods: {
    async getlist () {
      const [, res] = await getList()
      this.list = res.data
    },
    async getBill () {
      const [, res] = await getBillFive()
      this.bills = res.data
    },
    async drawLine () {
      const [, res] = await getTj()
      const myChart = this.$echarts.init(document.getElementById('myChart'))
      myChart.setOption({
        xAxis: {
          type: 'category',
          data: res.data.dayList
        },
        yAxis: {
          type: 'value',
          show: false
        },
        series: [
          {
            data: res.data.mList,
            type: 'line',
            style: 'curve',
            color: '#0eb659',
            // itemStyle: { normal: { label: { show: true } } }
            label: {
              show: true,
              formatter: function (data) {
                return '￥' + data.value
              }
            },
            symbolSize: 1
          }
        ]
      })
    }
  }

}
</script>
<style scoped lang="less">
.home-page {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 15px;
}
.more {
  margin: 0 10px;
  background-color: #fff;
  border-radius: 10px;
  margin-top: 15px;
  p {
    font-size: 16px;
    padding: 10px 15px;
    margin: 0;
  }
  .bb {
    border-bottom: 1px solid #00000014;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px;
    .li {
      width: 90px;
      height: 50px;
      margin-bottom: 10px;
      border-radius: 10px;
      padding: 5px;
      color: #704141;
      .uname {
        font-size: 20px;
        width: 100%;
        text-align: center;
      }
      .unum {
        margin-top: 3px;
        width: 100%;
        text-align: center;
      }
    }

    .li:last-child:nth-child(3n - 1) {
      margin-right: 117px;
    }
  }
  .chart {
    height: 250px;
  }
  .box {
    padding: 10px;
    .item {
      display: flex;
      align-items: center;
      background-color: rgba(0, 0, 0, 0.03);
      padding: 0 5px;
      border-radius: 10px;
      margin-bottom: 10px;
      .van-image {
        width: 40px;
        height: 40px;
      }
      .name {
        font-size: 20px;
        font-weight: normal;
        margin-left: 15px;
        flex: 1;
      }
      .time {
        flex: 1;
      }
      .num {
        width: 100px;
        text-align: right;
      }
    }
  }
}
</style>
